<template>
  <div>
    <el-row>
      <el-col style="display:flex;align-items: center;margin-bottom:10px;">
        <div class="border"></div>
        <h3>{{equipmentStatus.bedTitle}}</h3>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <div style="display:flex;align-items: center;margin-left:20px">
          <p>{{cameraManagement.search}}</p>
          <el-input
            style="width:260px;margin-right:10px"
            v-model.trim="deviceNo"
            :placeholder="equipmentStatus.deviceNo"
            @keyup.enter.native.prevent="check"
          ></el-input>
          <el-button class="searchBtn boxShadowButton" @click="check">{{cameraManagement.check}}</el-button>
        </div>
      </el-col>
      <el-col align="right" :span="8">
        <el-button
          class="prevPage boxShadowButton"
          :disabled="pageNum==firstPage"
          @click="prevePage"
        >{{$t('m.prevPage')}}</el-button>
        <el-button
          class="nextPage boxShadowButton"
          :disabled="pageNum==lastPage"
          @click="nextPage"
        >{{$t('m.nextPage')}}</el-button>
      </el-col>
    </el-row>
      <el-table :data="tableData"  style="width: 100%;margin-top:10px;margin-left:20px"  :row-style="tableRowStyle" :header-cell-style="tableHeaderColor">
        <el-table-column type="index" :label="equipmentStatus.sort" width="100" align="center"></el-table-column>
        <el-table-column prop="deviceNo"  :label="equipmentStatus.name"  align="center"></el-table-column>
        <el-table-column prop="createdTime"  :label="equipmentStatus.updataTime"  align="center"></el-table-column>
        <el-table-column prop="online"  :label="equipmentStatus.online" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.online==1" style="color:green">{{cameraManagement.online}}</span>
            <span v-else style="color:red" >{{cameraManagement.offline}}</span>
        </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
    <el-pagination
      background
      layout="total,prev, pager, next,jumper"
      :total="total"
      style="margin-top:20px"
      align= "center"
      class="fenye"
       @current-change="changePage"
       :current-page='currentPage'>
    </el-pagination>

  </div>
</template>
<script>
export default {
  data() {
    return {
         cameraManagement: this.$t("m.cameraManagement"), //引入 lang 里面的字符串资源,
         equipmentStatus: this.$t("m.equipmentStatus"), //引入 lang 里面的字符串资源,
         tableData:[],
         deviceNo:"", //设备名称
         total:0,
         pageNum:1,
         pageSize:10,
         currentPage:1,
        firstPage:'',//第一页
        lastPage:'',//最后一夜

    };
  },
  methods:{
       /* 
      修改table tr行的背景色
    */
    tableRowStyle({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "background-color: #efefef";
      } else {
        return "background-color: #f9f9f9";
      }
    },

    /* 
      修改table header的背景色
    */
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#ffffff;color:#000000;font-weight: 700;";
      }
    },

    //查询设备状态
    getEquipmentStatus(){
        let param = {
            pageNum:this.pageNum,
            pageSize:this.pageSize,
            deviceNo:this.deviceNo,
            groupId: sessionStorage.getItem("groupId")
        }
        this.$postJson('dmc/online/queryListWithPage',param).then(res =>{
            this.tableData  = res.result.list
            this.currentPage = res.result.pageNum
            this.total = Number(res.result.total)
             this.firstPage= res.result.firstPage//第一页
            this.lastPage= res.result.lastPage//最后一页
        })
    },

    //搜索
    check(){
        this.pageNum = 1
        this.getEquipmentStatus()
    },

    //上一页
    prevePage(){
      this.pageNum= this.pageNum>this.firstPage ? this.pageNum-1 : this.firstPage;
      this.getEquipmentStatus()
    },

      //下一页
    nextPage(){
      this.pageNum= this.pageNum<this.lastPage ? this.pageNum+1 : this.lastPage;
      console.log(this.pageNum,'aaaaaa')
      this.getEquipmentStatus()
    },

    //翻页
    changePage(val){
      this.pageNum = val
      this.currentPage = val
      this.getEquipmentStatus()
    },
  },

    mounted(){
        this.getEquipmentStatus()
    }
};
</script>
<style lang="scss" scoped>
/deep/.el-select input {
    width: 150px;
    border: none !important;
    border-bottom: 2px solid #cccccc !important;
    border-radius: 1px;
  }
  .prevPage{
      background:#409efe;
      color:#ffffff;
    }
    .nextPage{
      background: #ffffff;
    }
.border {
  width: 10px;
  height: 30px;
  background: black;
  margin-right: 10px;
}
.addBtn {
  color: #7e7e7e;
}
.searchBtn {
  background: #409efe;
  color: #ffffff;
}
.jiebangBtn{
  background: #409EFF;
  color: #ffffff;
  border-radius: 5px;
}
.fixBtn{
   background: #E6A23C;
  color: #ffffff;
  border-radius: 5px;
}
.detailBtn {
  background: #67C23A;
  color: #ffffff;
  border-radius: 5px;
}
.deleteBtn {
  background: #dddddd;
  color: #010101;
  border-radius: 5px;
}

/deep/ .deviceDialog .el-form-item {
  margin-bottom: 20px !important;
}
/deep/ .deviceDialog .el-form-item__label{
  line-height: 20px !important;
}
/deep/ .deviceDialog-contentOne .el-form-item__content{
  height:35px !important;
  line-height: 40px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/ .deviceDialog-contentTwo .el-form-item__content{
  height:35px !important;
  line-height: 30px !important;

}
/deep/ .deviceDialog .el-input__inner{
  height:20px !important;
  line-height: 20px !important;
}
/deep/ .deviceDialog .el-input__icon{
  height:120% !important;
}
/deep/ .deviceDialog .el-input{
  width:150px !important;
}
</style>